iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

用30days 了解web系列 第 7

(Day 07) Creating CRUD with Laravel, Mysql, Bootstrap part III

  • 分享至 

  • xImage
  •  

today's articles are still about CRUD, but todays will mainly talk about Updates part or known as Edit.
https://ithelp.ithome.com.tw/upload/images/20200920/20129609oYN0ELnDFc.png

Edit
https://ithelp.ithome.com.tw/upload/images/20200920/20129609wadokAGAtM.png

https://ithelp.ithome.com.tw/upload/images/20200920/20129609e31lGVUpnD.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4"></div> 
            <div class="col-4" style="top:180px">
                <form action="/updates/{{$data->id}}" method="POST">
                    @csrf
                    <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="text" class="form-control" name="user_name" value="{{$data->name}}">
                    </div>
                    <div class="form-group">
                    <label for="exampleInputPassword1">Email</label>
                    <input type="email" class="form-control" name="user_email" value="{{$data->email}}">
                    </div>
                    <div class="form-group">
                    <label for="exampleInputPassword1">Telephone</label>
                    <input type="tel" class="form-control" name="user_phone" value="{{$data->phone}}">
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>    
            </div> 
            <div class="col-4"></div>
        </div>
    </div>
</body>
</html>

explanation
when the edit button is clicked. we actually go to localhost:8000/edit/{id}. 
I use get method and obtain the data from database using where function

https://ithelp.ithome.com.tw/upload/images/20200920/20129609mCJuJx793l.png

the value of Name, Email, Telephone is automatically loaded into HTML form.
after we edited the value inside and click the submit button, this button will take you to /update/{id} and once again go to HomeController and call the function called updates.


上一篇
(Day 06) Introduction to CSRF: Cross-Site Request Forgery
下一篇
(Day 08) what is RESTful API
系列文
用30days 了解web30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言